<template>
  <div class="home">
    <div v-for="(item,index) in goods" :key="index" class="item">
      <div class="item_left">
        <img :src="item.mainPic" alt width="80%" />
      </div>
      <div class="item_right">
        <p>{{item.title}}</p>
        <br />
        <p class="item_price">
          <span>￥{{item.originalPrice}}</span>
          <span class="addCart" @click="addCart(item)">加入购物车</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
localStorage.setItem("keys", JSON.stringify(false));
export default {
  mounted() {
    this.$store.dispatch("getGoods");
  },
  computed: {
    goods: function() {
      return this.$store.state.goods;
    }
  },
  methods: {
    addCart(item) {
      //加购物车
      this.$store.dispatch("add_Cart", item);
      if (this.login_state === false) {
        this.$router.push({
          path: "/login"
        });
      } else {
        this.$router.push("/cart");
      }
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 1px solid #eee;
  margin-top: 10px;
}
.item_left {
  flex: 2;
  /* border: 1px solid #000;; */
}
.item_left img {
  padding: 10px;
}
.item_right {
  flex: 4;
  /* border: 1px solid #000;; */
}
.item_right p {
  margin-top: 10px;
  padding-left: 10px;
}
.item_price {
  color: red;
}
.addCart {
  padding: 5px 10px 5px 10px;
  border: 1px solid red;
  float: right;
  margin-right: 10px;
  color: white;
  background: red;
}
</style>